<template>
  <div id="login-container">
    <div class="login-wrapper">
      <div class="image-side">
        <!-- 图片保持原始尺寸 -->
        <img class="login-image" src="@/assets/loginpicture.png" alt="Login Background Image">
      </div>
      <div class="form-side">
        <el-form
      ref="loginForm"
      :model="userInfo"
      :rules="rules"
      class="login-form"
      label-width="80px"
    >
    <!-- 将logo放到标题上面 图片大小调整到和页面符合-->
      <div class="logo-wrapper">
        <img class="login-logo" src="@/assets/logo.png" alt="Logo">
      </div>
      <!-- 标题 -->
      <!-- <h2 class="login-title">{{ systemName }}</h2> -->
      <el-form-item prop="account">
        <el-icon class="login-user"><User /></el-icon>
        <el-input
          v-model="userInfo.account"
          autocomplete="off"
          placeholder="警员账号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-icon class="login-user"><Lock /></el-icon>
        <el-input
          v-model="userInfo.password"
          @keyup.enter="login"
          :type="switchText"
          placeholder="密码"
          autocomplete="off"
        ></el-input>
        <svg-icon
          class="eye"
          :name="switchIcon"
          color="#889aa4"
          @click="switchStatus"
        />
      </el-form-item>
      <el-button
        @click="login"
        type="primary"
        size="large"
        :loading="loading"
        @mousedown="console.log('按钮被点击')"
        >登录</el-button
      >
      <!-- <div class="version">版本号：{{ version }}</div> -->
      <!-- <div class="version" style="margin-top: -10px">
        账号：any &nbsp;&nbsp;&nbsp;&nbsp;密码：any
      </div> -->
    </el-form>
      </div>
    </div>


    
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import bgColor from "@/mixin/global";
import { mapActions } from 'vuex';

export default {
  // mixins: [globalProperty],
  data() {
    return {
      // backgroundColor: this.bgColor,
      passwordStatus: true,
      version: import.meta.env.VITE_VERSION,
      systemName: import.meta.env.VITE_SYSTEM_NAME,
      loading: false,
      switchText: "password",
      switchIcon: "eye",
      userInfo: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入警员账号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    passwordStatus(newValue) {
      if (newValue) {
        this.switchText = "password";
        this.switchIcon = "eye";
      } else {
        this.switchText = "text";
        this.switchIcon = "eye-open";
      }
    },
  },
  methods: {
    async login() {
      console.log('登录方法被调用');
      
      try {
        const valid = await this.$refs.loginForm.validate();
        console.log('表单验证结果:', valid);
        
        if (!valid) {
          ElMessage.error('请输入账号和密码');
          return;
        }
        
        this.loading = true;
        const loginParams = {
          account: this.userInfo.account,
          password: this.userInfo.password
        };
        console.log('准备调用登录 Action，参数:', loginParams);
        
        const res = await this.$store.dispatch('LoginAction', loginParams);
        console.log('登录响应:', res);
        
        ElMessage.success('登录成功');
        this.$router.push("/");
      } catch (err) {
        console.error('登录失败:', err);
        ElMessage.error(err?.message || '登录失败');
      } finally {
        this.loading = false;
      }
    },
    
    // 显示密码
    switchStatus() {
      this.passwordStatus = !this.passwordStatus;
    },
  },
};
</script>

<style lang="stylus">
@import '../../stylus/variables.styl';

#login-container {
  width: 100vw;
  height: 100vh;
  background: $backgroundColor;
  border-radius: 10px
}

.login-form {
  width: 520px;
  padding: 233px 35px 0;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px
}

.login-title {
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

.el-form-item {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  background: rgba(0, 0, 0, 0.1);
  color: #454545;
  border-radius: 15px;
}

#login-container input{
  background: transparent !important;
  outline: none;
  border: none;
  padding-left: 59px;
  color: #fff;
  height: 100%;
  border-radius: 15px;
}
.el-input__wrapper  {
  background: transparent !important;
  box-shadow: none;
}
#login-container .el-input {
  height: 47px;
}

#login-container .el-form-item__content {
  position: relative;
  margin-left: 0 !important;
}

.login-user {
  position: absolute;
  font-size: 19px;
  color: #889aa4;
  left: 16px;
  top: 13px;
}

#login-container button {
  width: 100% !important;
  margin-top: 10px;
}

.eye {
  position: absolute;
  right: 18px;
  top: 16px;
  cursor: pointer;
  font-size: 16px;
}

.version {
  padding: 15px 0px;
  margin: 15px 0 0 0;
  color: #a6a6a6;
  font-size: 13px;
  // font-weight: bold;
}
// 使用明亮的颜色作为主色调
$main-color = #3498db // 浅蓝色示例

#login-container {
  background: linear-gradient(to right, lighten($main-color, 20%), $main-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 90%;
  max-width: 520px;
  padding: 35px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 8px;
}

.login-title {
  color: $main-color;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 15px;
}

#login-container input {
  color: #333;
  &:focus {
    border-color: $main-color;
  }
}

.el-button--primary {
  background-color: $main-color;
  border-color: $main-color;
  &:hover {
    background-color: darken($main-color, 10%);
    border-color: darken($main-color, 10%);
  }
}

.eye {
  color: $main-color;
}

.version {
  color: #666;
}

#login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5; // 页面背景色
  border-radius: 10px
}

.login-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1100px; // 可以根据实际需要调整最大宽度
}

.image-side {
  flex: 0 0 50%; // 占容器宽度的一半
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.login-image {
  width: 100%; // 图片宽度占满容器
  height: 100%; // 图片高度占满容器
  
}

.form-side {
  flex: 0 0 50%; // 占容器宽度的另一半
  padding: 50px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

// 其他样式根据需要调整
</style>人口数据库管理系统